<template>
  <a-modal 
    :visible="visible"
    okText="提交" 
    cancelText="关闭"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="1000px"
    :confirmLoading="confirmLoading"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-form :form="form"  :label-col="{ span: 5 }" :wrapper-col="{ span:18 }">
      
      <a-form-item label="模板名称">
        <a-input
          :maxLength="32"
          v-decorator="[
            'fareName',
            {rules: [{required: true, message: '请输入模板名称'} ]}
          ]"
          placeholder="请输入模板名称"
        />
      </a-form-item>
      <a-form-item label="计费方式">
        <a-radio-group
          :options="typeOptions"
          @change="e => costType = e.target.value"
          v-decorator="[
            'costType',
            {rules: [{required: true, message: '请选择计费方式'} ], initialValue: costType}
          ]"
        />
      </a-form-item>
      <a-form-item label="配送区域">
        <delivery-area :costType="costType" v-decorator="[
            'fareDeliveryList',
            {rules: [{required: true, message: '请选择配送区域'} ]}
          ]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import DeliveryArea from './DeliveryArea'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'template-info',
  components: {
    DeliveryArea
  },
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    title () {
      return this.record.id || this.record.copy ? '新增模板' : '修改模板'
    },
    
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      costType: 1, // 计费方式
      confirmLoading: false,
      typeOptions: [
        {label: '按件数', value: 1},
        {label: '按重量', value: 2},
      ]
    }
  },
  watch: {
    visible (value) {
      this.costType = 1
      if (value && this.record.id) {
        this.getInfo()
      }
    }
  },
  mounted () {
  },
  methods: {
    getInfo () {
      this.$get(`/fare/model/id`, {id: this.record.id}).then(res => {
        if (res && res.returnCode === 1000) {
          const record = res.dataInfo || {}
          this.costType = record.costType
          if (record.fareDeliveryList && record.fareDeliveryList.length) {
            record.fareDeliveryList.forEach(item => {
              item.firstWeight = this.number2Price(item.firstWeight, 1000)
              item.followWeight = this.number2Price(item.followWeight, 1000)
              item.firstPrice = this.number2Price(item.firstPrice, 100)
              item.followPrice = this.number2Price(item.followPrice, 100)
            })
          }
          this.$nextTick(()=> {
            const formItems = this.form.getFieldsValue();
            Object.keys(formItems).forEach(key => {
              formItems[key] = record[key]
            })
            this.form.setFieldsValue(formItems);
          })
        }
      })
    },
    number2Price (value, multiple=100) {
      value = +value || 0
      if (!value) return 0
      return +((value / multiple).toFixed(2))
    },
    price2Number (value, multiple = 100) {
      value = +value || 0
      if (!value) return 0
      return +((value * multiple).toFixed())
    },
    handleSubmit () {
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          values = cloneDeep(values)
          let url = '/fare/model/add'
          if (this.record.id && !this.record.copy) {
            url = '/fare/model/update'
            values.id = this.record.id
          }
          if (values.fareDeliveryList && values.fareDeliveryList.length) {
            values.fareDeliveryList.forEach(item => {
              item.firstWeight = this.price2Number(item.firstWeight, 1000)
              item.followWeight = this.price2Number(item.followWeight, 1000)
              item.firstPrice = this.price2Number(item.firstPrice, 100)
              item.followPrice = this.price2Number(item.followPrice, 100)
            })
          }
          this.$post(url, {...values}).then(res => {
            this.confirmLoading = false
            if (res && res.returnCode === 1000) {
              this.$message.success('保存成功！')
              this.closeModal(true)
            }
          }).catch(err=> {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      });
    },
    
    closeModal (freshTable) {
      this.form.resetFields()
      this.$emit('cancel', freshTable)
    }
  }
}
</script>